;(function ($) {
    'use strict';

    $.dateTime = Class.create();

    $.extend(true, $.dateTime.prototype, {

        defaultInputDOMType: 'signle',

        _defaultClasses: {

        },

        // 获取input框模板
        _getInputDOMTemplate: {
            single() {
                return `<div class="dt-dateTime">
                            <div class="dt-dateTime-container dt-dateTime-outLined">
                                <div class="dt-dateTime-input">
                                    <input type="text" placeholder="请选择日期" readonly>
                                    <span class="dt-dateTime-suffix">
                                        <span class="dt-dateTime-icon">
                                            <svg viewBox="64 64 896 896" t="1706066317970" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5157" width="16"><path d="M875.971388 141.872812H729.734971V88.685814c0-18.445135-14.949799-33.394934-33.394934-33.394935s-33.394934 14.949799-33.394934 33.394935v53.186998h-291.315143V88.685814c0-18.445135-14.949799-33.394934-33.394934-33.394935s-33.394934 14.949799-33.394935 33.394935v53.186998H158.592543c-56.437439 0-102.355473 45.918035-102.355474 102.355474v648.206805c0 56.437439 45.918035 102.355473 102.355474 102.355473h717.378845c56.437439 0 102.355473-45.918035 102.355474-102.355473V244.228286c0-56.437439-45.918035-102.355473-102.355474-102.355474z m-717.378845 66.789869h717.378845c19.613958 0 35.565605 15.951647 35.565605 35.565605v81.817589H123.026938v-81.817589c0-19.613958 15.951647-35.565605 35.565605-35.565605z m717.378845 719.338015H158.592543c-19.613958 0-35.565605-15.951647-35.565605-35.565605V392.835743h788.510055v499.610479c0 19.613958-15.951647 35.565605-35.565605 35.565605zM341.218306 516.296815c0 18.445135-14.949799 33.394934-33.394934 33.394934h-63.21661c-18.445135 0-33.394934-14.949799-33.394935-33.394934s14.949799-33.394934 33.394935-33.394934h63.21661c18.445135 0 33.394934 14.949799 33.394934 33.394934z m0 142.306946c0 18.445135-14.949799 33.394934-33.394934 33.394935h-63.21661c-18.445135 0-33.394934-14.949799-33.394935-33.394935s14.949799-33.394934 33.394935-33.394934h63.21661c18.445135 0 33.394934 14.949799 33.394934 33.394934z m0 142.306947c0 18.445135-14.949799 33.394934-33.394934 33.394934h-63.21661c-18.445135 0-33.394934-14.949799-33.394935-33.394934s14.949799-33.394934 33.394935-33.394935h63.21661c18.445135 0 33.394934 14.949799 33.394934 33.394935z m253.178128-284.502577c0 18.445135-14.949799 33.394934-33.394934 33.394935h-63.21661c-18.445135 0-33.394934-14.949799-33.394935-33.394935s14.949799-33.394934 33.394935-33.394934h63.21661c18.445135 0 33.394934 14.949799 33.394934 33.394934z m0 142.306947c0 18.445135-14.949799 33.394934-33.394934 33.394934h-63.21661c-18.445135 0-33.394934-14.949799-33.394935-33.394934s14.949799-33.394934 33.394935-33.394935h63.21661c18.445135 0 33.394934 14.949799 33.394934 33.394935z m0 142.306946c0 18.445135-14.949799 33.394934-33.394934 33.394934h-63.21661c-18.445135 0-33.394934-14.949799-33.394935-33.394934s14.949799-33.394934 33.394935-33.394934h63.21661c18.445135 0 33.394934 14.949799 33.394934 33.394934z m253.178128-284.502576c0 18.445135-14.949799 33.394934-33.394934 33.394934h-63.21661c-18.445135 0-33.394934-14.949799-33.394935-33.394934s14.949799-33.394934 33.394935-33.394934h63.21661c18.445135 0 33.394934 14.949799 33.394934 33.394934z m0 142.306946c0 18.445135-14.949799 33.394934-33.394934 33.394934h-63.21661c-18.445135 0-33.394934-14.949799-33.394935-33.394934s14.949799-33.394934 33.394935-33.394934h63.21661c18.445135 0 33.394934 14.949799 33.394934 33.394934z m0 142.306947c0 18.445135-14.949799 33.394934-33.394934 33.394934h-63.21661c-18.445135 0-33.394934-14.949799-33.394935-33.394934s14.949799-33.394934 33.394935-33.394935h63.21661c18.445135 0 33.394934 14.949799 33.394934 33.394935z" p-id="5158" fill="#2fd43a"></path></svg>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>`
            },

            range() {

            },

            year() {

            },

            month() {

            }
        },

        // 获取一些DOM
        _getDOMS: {
            _getYearArrowPrevDOM() {
                return `<button type="button" class="dt-dateTime-year-prev">
                        <span class="dt-dateTime-arrow">
                            <svg t="1706151158881" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8117" width="24"><path d="M550.4 494.933333l192 192 29.866667-29.866666-162.133334-162.133334 162.133334-162.133333-29.866667-29.866667-192 192z m-256 0l192 192 29.866667-29.866666-162.133334-162.133334 162.133334-162.133333-29.866667-29.866667-192 192z" fill="#444444" p-id="8118"></path></svg>
                        </span>
                    </button>`
            },

            _getYearArrowNextDOM() {
                return `<button type="button" class="dt-dateTime-month-next">
                        <span class="dt-dateTime-arrow">
                            <svg t="1706152366635" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8425" width="24"><path d="M644.266667 494.933333l-192 192-29.866667-29.866666 162.133333-162.133334-162.133333-162.133333 29.866667-29.866667 192 192z" fill="#444444" p-id="8426"></path></svg>
                        </span>
                    </button>`
            },

            _getMonthArrowPrevDOM() {
                return `<button type="button" class="dt-dateTime-month-prev">
                        <span class="dt-dateTime-arrow">
                            <svg t="1706152294626" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8271" width="24"><path d="M384 512l192 192 29.866667-29.866667-162.133334-162.133333 162.133334-162.133333-29.866667-29.866667L384 512z" fill="#444444" p-id="8272"></path></svg>
                        </span>
                  </button>`
            },

            _getMonthArrowNextDOM() {
                return `<button type="button" class="dt-dateTime-year-next">
                        <span class="dt-dateTime-arrow">
                            <svg t="1706151119685" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7963" width="24"><path d="M516.266667 494.933333l-192 192-29.866667-29.866666 162.133333-162.133334-162.133333-162.133333 29.866667-29.866667 192 192z m256 0l-192 192-29.866667-29.866666 162.133333-162.133334-162.133333-162.133333 29.866667-29.866667 192 192z" fill="#444444" p-id="7964"></path></svg>
                        </span>
                    </button>`
            },

            _getYearDOM() {
                return `<button type="button" class="dt-dateTime-year">2024年</button>`
            },

            _getMonthDOM() {
                return `<button type="button" class="dt-dateTime-month">1月</button>`
            },

            _getWeeksDOM() {
                // 周末：dt-dateTime-week_weekday
                return `<div class="dt-dateTime-week-container"></div>`
            },

            _getDaysDOM() {
                return `<div class="dt-dateTime-date-container"></div>`
            },

            _getTimeDOM() {
                return `<div class="dt-dateTime-time-container"></div>`
            },

        },

        // 获取面板模板
        _getDateTimeDOMTemplate: {
            defaultDOMTemplate() {
                return `<div class="dt-dateTime-panel-container">
                            <div class="dt-dateTime-panel-layout">
                                <div class="dt-dateTime-panel-column">
                                    <div class="dt-dateTime-panel-date-container">
                                        <div class="dt-dateTime-panel-date-header">
                                            <# YearArrowPrev>
                                            <# MonthArrowPrev>
                                            <div class="dt-dateTime-panel-date-header_content">
                                                <# Year>
                                                <# Month>
                                            </div>
                                            <# YearArrowNext>
                                            <# MonthArrowNext>
                                        </div>
                                        <div class="dt-dateTime-date-wrapper">
                                            <# Weeks> 
                                            <# Days>
                                        </div>
                                    </div>
                                    <# Time>
                                </div>
                            </div>
                        </div>`
            },
        },

        /**
         * 初始化
         */
        initialize(dtTimeContainer, props) {
            this.container = dtTimeContainer.find('.dt-dateTime').get(0);

            this._init(dtTimeContainer, props);
        },

        /**
         * @param dtTimeContainer 控件容器DOM
         * @param props 入参配置
         * @private
         */
        _init(dtTimeContainer, props) {
            this.firstInit = true;

            this._createPanel();


        },

        /**
         * 创建面板
         * @private
         */
        _createPanel() {

        },

        /**
         * 解析组件DOM
         * @private
         */
        _DOMParser(template) {
            var _this = this;

            const componentsDOM = {
                YearArrowPrev: _this._getDOMS._getYearArrowPrevDOM(),
                MonthArrowPrev: _this._getDOMS._getMonthArrowPrevDOM(),
                YearArrowNext: _this._getDOMS._getYearArrowNextDOM(),
                MonthArrowNext: _this._getDOMS._getMonthArrowNextDOM(),
                Year: _this._getDOMS._getYearDOM(),
                Month: _this._getDOMS._getMonthDOM(),
                Weeks: _this._getDOMS._getWeeksDOM(),
                Days: _this._getDOMS._getDaysDOM()
            };

            const getComponent = (pattern) => componentsDOM[pattern];

            return template.replace(/<#(.*?)\/>/g, (_, p1) => {
                const component = getComponent(p1.replace(/[\s\n\t]/g, ""));
                return component ? component(this) : "";
            }).replace(/[\n\t]/g, "");
        }
    })

    /* 时间控件核心代码 */
    $.extend(true, $.dateTime, {
        create(props) {
            if (!props.id) {
                return;
            }

            let DOMTemplate = $.dateTime.prototype._getInputDOMTemplate[props.type || this.defaultInputDOMType]();
            $(props.id).html(DOMTemplate);
        },

        init(node, props) {
            var oDetail = new $.dateTime(node, props);
            return oDetail;
        }
    })
})(jQuery)